<template>
  <div class="property-panel">
    <a-tabs v-model:activeKey="activeKey" centered>
      <a-tab-pane key="1" tab="卡片属性">
        <PropertyConfig
          :formCards="formCards"
          :card="curCard"
          :controls="controls"
        />
      </a-tab-pane>
      <a-tab-pane key="2" tab="表单属性" force-render>
        <PropertyConfig
          :formCards="formCards"
          :card="curCard"
          :controls="formProperty"
        />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref, watchEffect } from 'vue';
import { useStore } from 'vuex';
import PropertyConfig from '@/engine/components/PropertyConfig.vue';

export default defineComponent({
  name: 'PropertyPanel',
  components: {
    PropertyConfig,
  },
  setup() {
    const store = useStore();
    const activeKey = ref('1');
    const curCard = computed(() => store.getters['formDesign/curCard']);
    const curCardCode = computed(() => store.state.formDesign.curCardCode);
    const controls = computed(() => curCard.value?.controls ?? {});
    const formCards = computed(() => store.state.formDesign.form.formCards);
    const formProperty = computed(
      () => store.state.formDesign.form.formProperty,
    );
    watchEffect(() => {
      if (!curCardCode.value) {
        activeKey.value = '2';
      } else {
        activeKey.value = '1';
      }
    });

    return {
      activeKey,
      curCard,
      curCardCode,
      controls,
      formCards,
      formProperty,
    };
  },
});
</script>
<style lang="less" scoped>
.property-panel {
  width: 272px;
  height: 100%;
  background-color: @rb-body-background;
}
</style>
